<template>
  <view class="category-container">
    <!-- 状态栏占位 -->
    <view class="status-bar"></view>
    
    <!-- 导航栏 -->
    <view class="header">
      <view class="nav-content">
        <view class="back-btn" @tap="goBack">
          <text class="back-icon">←</text>
        </view>
        <text class="title">{{ categoryName }}</text>
        <view class="placeholder"></view>
      </view>
    </view>

    <!-- 疫苗列表 -->
    <view class="vaccine-list">
      <view 
        class="vaccine-item" 
        v-for="(vaccine, index) in vaccineList" 
        :key="index"
        @tap="goToVaccineDetail(vaccine)"
      >
        <view class="vaccine-info">
          <text class="vaccine-name">{{ vaccine.name }}</text>
          <text class="vaccine-desc">{{ vaccine.description }}</text>
          <view class="vaccine-bottom">
            <text class="price">¥{{ vaccine.price }}</text>
            <button class="book-btn" @tap.stop="bookVaccine(vaccine)">预约</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      categoryId: '',
      categoryName: '',
      vaccineList: [],
      categoryData: {
        1: { // 儿童疫苗
          name: '儿童疫苗',
          vaccines: [
            {
              id: 101,
              name: '五联疫苗',
              description: '预防百日咳、白喉、破伤风、脊髓灰质炎和b型流感嗜血杆菌',
              price: 898
            },
            {
              id: 102,
              name: 'MMR疫苗',
              description: '预防麻疹、腮腺炎和风疹',
              price: 268
            }
          ]
        },
        2: { // 成人疫苗
          name: '成人疫苗',
          vaccines: [
            {
              id: 201,
              name: '带状疱疹疫苗',
              description: '预防带状疱疹及其并发症',
              price: 1680
            },
            {
              id: 202,
              name: '乙肝疫苗',
              description: '预防乙型肝炎病毒感染',
              price: 158
            }
          ]
        },
        // ... 其他分类数据
      },
      statusBarHeight: 0
    }
  },

  onLoad(options) {
    this.categoryId = options.id
    this.categoryName = options.name
    
    // 获取上一页传递的数据
    const pages = getCurrentPages()
    const prevPage = pages[pages.length - 2]
    if (prevPage && prevPage.$vm.categoryVaccines) {
      this.vaccineList = prevPage.$vm.categoryVaccines
    }
    // 获取系统信息
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight
  },

  methods: {
    loadCategoryData() {
      const category = this.categoryData[this.categoryId]
      if (category) {
        this.categoryName = category.name
        this.vaccineList = category.vaccines
      }
    },

    goBack() {
      uni.navigateBack()
    },

    goToVaccineDetail(vaccine) {
      uni.navigateTo({
        url: `/pages/vaccination/detail?id=${vaccine.id}`
      })
    },

    bookVaccine(vaccine) {
      // 检查登录状态
      const userInfo = uni.getStorageSync('userInfo')
      if (!userInfo) {
        uni.showModal({
          title: '提示',
          content: '请先登录',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: '/pages/login/login'
              })
            }
          }
        })
        return
      }
      
      uni.navigateTo({
        url: `/pages/vaccination/booking?id=${vaccine.id}`
      })
    }
  }
}
</script>

<style lang="scss">
.category-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  
  .status-bar {
    height: 44px;
    background-color: #fff;
  }
  
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: #fff;
    
    .nav-content {
      margin-top: 44px;
      display: flex;
      align-items: center;
      padding: 20rpx 30rpx;
      height: 88rpx;
      
      .back-btn {
        width: 24rpx;
        height: 24rpx;
        display: flex;
        align-items: center;
        
        .back-icon {
          font-size: 24rpx;
          color: #333;
          font-weight: normal;
        }
      }
      
      .title {
        flex: 1;
        text-align: center;
        font-size: 32rpx;
        color: #333;
        font-weight: bold;
      }
      
      .placeholder {
        width: 24rpx;
      }
    }
  }
  
  .vaccine-list {
    margin-top: calc(44px + 88rpx);
    padding: 20rpx;
    
    .vaccine-item {
      background-color: #fff;
      border-radius: 12rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;
      
      .vaccine-info {
        .vaccine-name {
          font-size: 32rpx;
          color: #333;
          font-weight: bold;
          margin-bottom: 12rpx;
          display: block;
        }
        
        .vaccine-desc {
          font-size: 26rpx;
          color: #666;
          margin-bottom: 20rpx;
          display: block;
        }
        
        .vaccine-bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .price {
            font-size: 36rpx;
            color: #ff5500;
            font-weight: bold;
          }
          
          .book-btn {
            width: 160rpx;
            height: 64rpx;
            line-height: 64rpx;
            background-color: #ff5500;
            color: #fff;
            font-size: 28rpx;
            border-radius: 32rpx;
            padding: 0;
          }
        }
      }
    }
  }
}
</style> 